<template>
	<view>
		<!-- 加载框 -->
		<template>
			<view class="wC_loading" @touchmove="wCFun_nullFunction" v-show="wC_loading.wIsShow">
				<view class="wC_loadingBox">
					<image class="wC_loadingIcon" :src="wC_loading.wIcon" mode="aspectFit" v-show="wC_loading.wIcon">
					</image>
					<view class="wC_loadingRotate"></view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: "wc_global",
		data() {
			return {
				/**
				 * 加载框
				 */
				wC_loading: {
					wIsShow: false, // 是否显示
					wIcon: '', // 加载框图标
				}
			};
		},
		methods: {
			// 方法-空函数
			wCFun_nullFunction() {
				return;
			},
			/**
			 * 加载框
			 */
			// 方法-加载加载框，wP_truthy {Boolean} true-展示，false-隐藏
			wCFun_loading(wP_truthy, wP_icon) {
				this.wC_loading.wIsShow = (wP_truthy ? true : false);
				wP_icon && (this.wC_loading.wIcon = wP_icon);
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 加载框 */
	.wC_loading {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999999;
		animation: fadeIn 0.3s;


		.wC_loadingBox {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 20%;
			width: 80px;
			height: 80px;
			margin: auto;
			border-radius: 10px;
			background: rgba(66, 68, 86, 0.5);
		}

		.wC_loadingRotate {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 50px;
			height: 50px;
			margin: auto;
			border: 2px solid rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			border-left-color: #FFFFFF;
			box-sizing: border-box;
			animation: wLoadingRotate 0.5s linear infinite;
		}

		.wC_loadingIcon {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			overflow: hidden;
			margin: auto;
		}

		@keyframes fadeIn {
			0% {
				opacity: 0;
			}

			to {
				opacity: 1;
			}
		}

		@keyframes wLoadingRotate {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

	}
</style>
